<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      shape="round"
      background="#FF5722"
      placeholder="请输入搜索关键词"
      @click="handleSearchClick"
    >
     <template #left >
      <div style="padding-right: 10px;"><img src="@/assets/logo-mi2.png" alt="" style="width:28px;"></div>
      </template>
    </van-search>
    <!-- 轮播图 -->
    <!-- <van-swipe :autoplay="3000">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img v-lazy="banner.image" :style="{width: '375px', height: '150px'}" />
      </van-swipe-item>
    </van-swipe> -->
    <!-- 使用 swiper5.x 实现轮播效果 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
          <img :style="{width: '375px', height: '150px'}" :src="banner.image" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 宫格提示 -->
    <!-- <img src="../../assets/elm.png" alt="">
    <img :src="imgSrc" alt=""> -->
    <van-grid icon-size="28px" :column-num="5" gutter="10">
      <van-grid-item
        border= false
        v-for="grid in grids"
        :key="grid.id"
        :icon="grid.icon"
        :text="grid.text"
      />
    </van-grid>
    <van-image
      width="375"
      height="100"
      src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/u138.svg"
    />
    <van-row type="flex"
    justify="space-between">
      <van-col>
        <div class="youhui">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
     <van-col>
        <div class="youhui">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
        <van-col>
        <div class="youhui">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
    </van-row>
        <van-row type="flex"
    justify="space-between">
      <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
     <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
        <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
    </van-row>
        <van-row type="flex"
    justify="space-between">
      <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
     <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
        <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
    </van-row>
        <van-row type="flex"
    justify="space-between">
      <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
     <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
        <van-col>
        <div class="youhuia">
          <div class="youhuip1"><p>最高优惠700元</p>
          <p class="youhuip2">Redmik30 5g</p>
          <img src="@/assets/phone.jpg">
          </div>
        </div></van-col>
    </van-row>

    <!-- 滚动视图，展示分类 -->
    <van-tabs :animated="true">
      <van-tab
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
      >
          <!-- 显示渲染推荐商品 -->
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="我是有底线滴"
      @load="loadMore"
    >
      <van-card
        v-for="prod in products"
        :key="prod.id"
        :price="prod.price | money"
        :desc="prod.title"
        :title="prod.title"
        :thumb="prod.image"
        :origin-price="prod.originPrice | money"
        currency="￥"
        @click="handleJumpToDetail(prod.id)"
      >
        <template v-slot:num>
          <span>月销量: {{ prod.saleNum }}</span>
          <!-- <van-icon name="cart-circle-o" size="18px" color="#f00" @click.stop="handleAddToCart(prod)" /> -->
          <van-icon name="cart-circle-o" size="18px" color="#f00" @click.stop="handleAddToCart(prod)" />
        </template>
        <template #tags>
          <van-tag color="#f00" plain v-if="prod.isFreePostage">包邮</van-tag>
          <van-tag color="#7232dd" plain v-if="prod.couponValue">{{ prod.couponValue }}</van-tag>
        </template>
      </van-card>
    </van-list>
      </van-tab>
    </van-tabs>

    <!-- <div v-for="prod in products" :key="prod.id">{{ prod.title }}</div> -->
  </div>
</template>

<script>
import Swiper from 'swiper'
import { Toast } from 'vant'
import { getCategories } from '@/api/category'
import { getHomeData } from '@/api/home'
import { getProductsList } from '@/api/product'
import phone from '@/assets/phone.jpg' // const elm = require()
import 'swiper/css/swiper.css'

export default {
  name: 'Home',
  data() {
    return {
      categories: [], // 分类数组
      banners: [], // 轮播图数组
      // imgSrc: '../../assets/elm.png',
      grids: [ // 宫格数组
        {
          id: 1,
          icon: phone,
          text: '特卖',
        },
        {
          id: 2,
          icon: phone,
          text: '新品',
        },
        {
          id: 3,
          icon: phone,
          text: '电视',
        },
        {
          id: 4,
          icon: phone,
          text: '智能',
        },
        {
          id: 5,
          icon: phone,
          text: '智能',
        },
        {
          id: 6,
          icon: phone,
          text: '智能',
        },
        {
          id: 7,
          icon: phone,
          text: '智能',
        },
        {
          id: 8,
          icon: phone,
          text: '智能',
        },
        {
          id: 9,
          icon: phone,
          text: '智能',
        },
        {
          id: 10,
          icon: phone,
          text: '智能',
        },

      ],
      products: [], // 推荐商品的数组
      loading: false, // 表示列表组件中当前是否正在加载数据
      finished: false, // 表示列表组件中是否已经加载完所有数据
      nextIndex: 0, // 列表下一页数据的起始索引
    }
  },
  created() {
    // console.log('created........')
    // 发送网络请求，查询分类数据
    getCategories()
      .then(data => {
        // 获取到数据，处理
        this.categories = data.list
      })
      .catch(err => console.error('err:', err))
    // 发送网络请求，查询首页推荐数据
    getHomeData()
      .then(data => {
        // console.log('设置轮播图数据......')
        this.banners = data.banners
        // 推荐商品的数据
        this.products = data.items.list
        this.nextIndex = data.items.nextIndex
        this.finished = data.items.isEnd

        // this.$nextTick(callback) 或 Vue.nextTick(callback)
        // 作用： 将 callback 回调函数延迟到下一次 DOM 更新循环结束之后执行。
        this.$nextTick(() => {
          // eslint-disable-next-line
          new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            autoplay: true, // 自动轮播
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
            // 切换效果
            effect: 'coverflow',
          })
        })

        // setTimeout(() => {
        //   // eslint-disable-next-line
        //   new Swiper('.swiper-container', {
        //     loop: true, // 循环模式选项
        //     autoplay: true, // 自动轮播
        //     // 如果需要分页器
        //     pagination: {
        //       el: '.swiper-pagination',
        //     },
        //   })
        // })
      })

      .catch(console.error)
  },

  methods: {
    handleSearchClick() {
      // console.log('click')
      // 编程式的导航，向搜索页面跳转
      this.$router.push('/search')
    },
    /**
     * 加载更多推荐商品数据，这是列表组件 @load 事件的处理程序。
     * 在触发 load 事件后，会自动将 loading 设置为 true，则可
     * 以在事件函数中发送异步网络请求，返回后更新列表数据，更新完
     * 列表数据后，要将 loading 手动修改为 false(表示数据加载结
     * 束)
     */
    loadMore() {
      // console.log('load more...')
      // 发送网络请求，查询更多数据
      getProductsList(1, this.nextIndex)
        .then(data => {
          console.log('加载更多：', data)
          // 修改数据
          this.products = [
            ...this.products,
            ...data.list,
          ]
          this.nextIndex = data.nextIndex
          this.finished = data.isEnd
          // 将 loading 设置为 false
          this.loading = false
        })
        .catch(console.error)
    },
    /**
     * 跳转到详情页面
     */
    handleJumpToDetail(id) {
      // 编程式的导航
      // push() 方法可以传字符串参数，也可以传对象参数
      this.$router.push({
        // 注意，传递动态路径参数时，不能同时使用 path 与 params，同时使用，则忽略 params。
        // 这时应该使用 name 属性和 params 属性配合，才能够传递动态路由参数
        // path: '/detail',
        name: 'detail',
        params: {
          id,
        },
      })
    },
    /**
     * 加入购物车
     */
    handleAddToCart(prod) {
      const { id, title, image, price } = prod
      const currentProduct = {
        id,
        title,
        image,
        price,
        amount: 1, // 数量默认为1
      }
      this.$store.commit('cart/addToCart', currentProduct)
      Toast.success({
        message: '加入购物车',
        duration: 300,
      })
    },
  },
  filters: { // 过滤器，用于文本格式化
    money(val) {
      return Number(val).toFixed(2)
    },
  },
}
</script>

<style lang="less" scoped>
  .swiper-container {
    width: 375px;
    height: 150px;
  }

  // /deep/ .van-search{
  //   padding: 0.26667rem 1.32rem;
  // }

  // 样式穿透，使得我们在自己定义组件内部所书写的样式能够穿透修改 vant 组件原有样式。
  // 可以使用深度选择器 >>>，如果在 sass / less 等预处理器中不能使用，则可以使用别名
  // /deep/ 或 ::v-deep
  // ::v-deep .van-info {
  //   white-space: nowrap;
  // }
  /deep/ .van-info {
    white-space: nowrap;
  }
  .youhui{
    width: 120px;
    height: 160px;
    text-align: center;
    background-color: #D2CAF8;
    font-size: 14px;

    .youhuip2{
      color: blue;
      font-size: 8px;
    }
.youhuip1{
width: 110px;
height: 118px;
padding-top: 10px;
}
    img{
      width: 60px;
      height: 60px;
    }
  }
 .youhuia{
   background-color: #f6f6f6;
    width: 120px;
    height: 160px;
    text-align: center;
    font-size: 14px;
margin-top: 10px;
    .youhuip2{
      color: blue;
      font-size: 8px;
    }
.youhuip1{
width: 110px;
height: 118px;
padding-top: 10px;
}
    img{
      width: 60px;
      height: 60px;
    }
  }
</style>
